<template>
  <!-- 项目新增/编辑表单 -->
  <el-form ref="funFormRef" :model="formData" :rules="rules" label-width="80px">
    <el-form-item label="父级功能" prop="parentId">
      <base-tree-select v-model="formData.parentId" placeholder="选择上级功能" :data="funList" filterable check-strictly :render-after-expand="false" />
    </el-form-item>
    <el-form-item label="功能编码" prop="code">
      <el-input v-model="formData.code" placeholder="功能编码" />
    </el-form-item>
    <el-form-item label="功能名称" prop="name">
      <el-input v-model="formData.name" placeholder="请输入功能名称" />
    </el-form-item>

    <el-form-item label="功能类型" prop="type">
      <el-radio-group v-model="formData.type" @change="onMenuTypeChange">
        <el-radio label="catalog">目录</el-radio>
        <el-radio label="menu">功能</el-radio>
        <el-radio label="route">路由</el-radio>
        <el-radio label="button">按钮</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 组件页面完整路径 -->
    <el-form-item v-if="formData.type === 'menu' || formData.type === 'route'" label="页面路径" prop="component">
      <el-input v-model="formData.component" placeholder="system/user/index" style="width: 95%">
        <template v-if="formData.type === 'menu' || formData.type === 'route'" #prepend>src/views/</template>
        <template v-if="formData.type === 'menu' || formData.type === 'route'" #append>.vue</template>
      </el-input>
    </el-form-item>

    <el-form-item label="终端" prop="deviceType">
      <el-radio-group v-model="formData.deviceType">
        <el-radio value="web">电脑</el-radio>
        <el-radio label="mobile">手机</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item v-if="formData.type !== 'button'" prop="visible" label="显示状态">
      <el-radio-group v-model="formData.visible">
        <el-radio :label="1">显示</el-radio>
        <el-radio :label="0">隐藏</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="排序" prop="sort">
      <el-input-number v-model="formData.sort" style="width: 100px" controls-position="right" :min="0" />
    </el-form-item>
    <el-form-item v-if="formData.type !== 'button'" label="图标" prop="icon">
      <!-- 图标选择器 -->
      <icon-select v-model="formData.icon" />
    </el-form-item>
  </el-form>
</template>
<script setup>
  import { findFunById, saveFun, listFuns } from '@/api/system/fun/index';
  import IconSelect from '@/components/IconSelect/index.vue';

  const props = defineProps({ id: { type: String, required: true }, productId: { type: String, required: true } });

  let defaultFromData = {
    id: '',
    code: '',
    parentId: '0',
    productId: props.productId,
    visible: 1,
    sort: 1,
    type: 'menu',
    deviceType: 'web',
    alwaysShow: 0,
    keepAlive: 0,
  };

  const formData = reactive(Object.assign({}, defaultFromData));

  const funList = ref([]); // 部门列表
  function init() {
    listFuns({
      productId: props.productId,
    }).then((response) => {
      funList.value = [
        {
          id: '0',
          name: '顶级功能',
          children: response.data,
        },
      ];
    });
  }

  watch(
    () => props.id,
    () => {
      if (props.id) {
        loadData();
      } else {
        setValue({});
      }
    },
    { immediate: true }
  );
  watch(
    () => props.productId,
    () => {
      if (props.productId) {
        init();
      } else {
        funList.value = [];
      }
    },
    { immediate: true }
  );
  const funCacheData = reactive({
    type: '',
    path: '',
  });

  /** 功能类型切换事件处理 */
  function onMenuTypeChange() {
    // 如果功能类型改变，清空路由路径；未改变在切换后还原路由路径
    if (formData.type !== funCacheData.type) {
      formData.path = '';
    } else {
      formData.path = funCacheData.path;
    }
  }

  function loadData() {
    findFunById(props.id).then(({ data }) => {
      setValue(data);
    });
  }

  // 校验规则
  const rules = reactive({
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
  });

  const funFormRef = ref(ElForm);

  function save() {
    funFormRef.value.validate((valid) => {
      if (valid) {
        saveFun(formData, true).then(({ data }) => {
          formData.id = data.id;
          ElMessage.success('保存功能成功');
        });
      }
    });
  }

  function setValue(data) {
    Object.assign(formData, defaultFromData, data);
    if (data.type) {
      funCacheData.type = data.type;
      funCacheData.path = data.path;
    }
  }

  defineExpose({ save, setValue });
</script>
